<template>
    <div class="pd-30">
        <div class="flex">
            <div class="flex">
                <div class=" center">
                    <p>分配状态：</p>
                    <el-select class="w-260" v-model="platform" placeholder="请选择">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class=" center ml-50">
                    <p>排课状态：</p>
                    <el-select class="w-260" v-model="fenPeiStatus" placeholder="请选择">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                
                <div class=" center ml-50">
                    <!-- <p>广告名称：</p> -->
                    <el-input class="w-260" v-model="input" placeholder="请输入"></el-input>
                </div>

                <div class="flex ml-80">
                    <el-button class="w-100" @click="chongzhi">重置</el-button>
                    <el-button class="w-100" type="primary" @click="getUserList">搜索</el-button>
                </div>
            </div>

        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="orderNum" label="订单编号" width="200"></el-table-column>
            <el-table-column prop="submitTime" label="下单时间" width="200"></el-table-column>
            <el-table-column prop="courseName"  width="300" label="科目"> </el-table-column>
            <el-table-column prop="studentName"  width="120" label="家长"></el-table-column>
            <el-table-column prop="price" width="120" label="费用"></el-table-column>
            <el-table-column prop="keShiAll" width="120" label="课时"></el-table-column>
            <el-table-column prop="keShiJiaoFU" width="120" label="交付数量"></el-table-column>
            <el-table-column prop="keShiSengYu" width="120" label="剩余数量"></el-table-column>
            <el-table-column prop="shouYi" label="收益" width="120"></el-table-column>
            <el-table-column prop="jiaoFuZhongXinName" width="160" label="分配交付中心"></el-table-column>
            <el-table-column prop="teacherName" label="分配老师"></el-table-column>


            <el-table-column label="操作"  width="350"  fixed="right">
                <template slot-scope="scope" >
                    <el-button  size="mini"  @click="handleEdit(scope.row,1)">排课记录</el-button>
                    <el-button  size="mini"  @click="handleEdit(scope.row,2)">分配记录</el-button>
                    <el-button  size="mini" @click="lookDetail(scope.row)">详情</el-button>
                    <el-button size="mini" type="primary" @click="fenpei(scope.row)">分配</el-button>   
                    <!-- v-if="scope.row.fenPeiStatus == 0"  -->
                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total" @current-change="sizeChange">
            </el-pagination>
        </div>

        <el-dialog :visible.sync="dialogVisible1" width="45%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ type == 1 ? '排课记录' : '分配记录' }}</h4>
            </span>
            <el-table :data="list" border style="width: 100%" v-if="type == 1">
                <el-table-column prop="id" label="编号">
                </el-table-column>
                <el-table-column prop="studentName" label="学生姓名"> 
                </el-table-column>
                <el-table-column prop="grade" label="年级">
                </el-table-column>
                <el-table-column prop="xiaoKeFlag" label="是否消课">
                    <template #default="{ row }">
                        {{ row.xiaoKeFlag == 0 ? "未消课" : "已消课" }}
                    </template>
                </el-table-column>
                <el-table-column prop="xiaokeTime" width="180" label="消课时间">
                    <template #default="{ row }">
                        {{ row.xiaoKeFlag == 0 ? "/" : row.xiaokeTime }}
                    </template>
                </el-table-column>
                
            </el-table>
            <el-table :data="list" border style="width: 100%" v-if="type == 2">
                <el-table-column prop="id" label="编号" >
                </el-table-column>
                <el-table-column prop="studentName" label="学生姓名">
                </el-table-column>
                <el-table-column prop="jiaoFuZhongXinName" label="分配交付中心">
                </el-table-column>
                <el-table-column prop="teacherName" label="分配交付老师">
                </el-table-column>
                <el-table-column prop="adminUserName" label="分配人"> 
                </el-table-column>
                <el-table-column prop="submitTime" width="180" label="分配时间">
                </el-table-column>
            </el-table>
            <div class="flex mt-20">
                <div></div>
                <el-pagination :current-page="page1" background layout="prev, pager, next" :total="total1" @current-change="sizeChange1">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">关闭</el-button>
            </span>
        </el-dialog>


        <el-dialog :visible.sync="dialogVisible" width="30%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">分配老师</h4>
            </span>
            <div class="plr-30">
                <div class="flex_l mt-20">
                    <div class="w-100">订单编号：</div>
                    <el-input class="w-350 ml-20" :disabled="true" v-model="currentOrder.orderNum" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">科目：</div>
                    <div class="w-350 ml-20">{{ currentOrder.courseName }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">课时：</div>
                    <div class="w-350 ml-20">{{ currentOrder.keShiAll }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">剩余课时：</div>
                    <div class="w-350 ml-20">{{ currentOrder.keShiSengYu }}</div>
                </div>

                <div class="flex_l mt-20">
                    <div class="w-100">分配交付中心：</div>
                    <el-select class="w-350 ml-20" filterable @change="change1" v-model="jiaoFuZhongXinId" placeholder="请选择">
                        <el-option v-for="item in jiaofuzhongxinList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">分配交付老师：</div>
                    <el-select class="w-350 ml-20" filterable @change="change2"  v-model="teacherId" placeholder="请选择">
                        <el-option v-for="item in laoshiList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible2" width="30%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">分配老师</h4>
            </span>
            <div class="plr-30">
                <div class="flex_l mt-20">
                    <div class="w-100">订单编号：</div>
                    <div class="w-350 ml-20">{{ currentOrder.orderNum }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">科目：</div>
                    <div class="w-350 ml-20">{{ currentOrder.courseName }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">家长：</div>
                    <div class="w-350 ml-20">{{ currentOrder.studentName }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">课时：</div>
                    <div class="w-350 ml-20">{{ currentOrder.keShiAll }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">已交付课时：</div>
                    <div class="w-350 ml-20">{{ currentOrder.keShiJiaoFU }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">剩余课时：</div>
                    <div class="w-350 ml-20">{{ currentOrder.keShiSengYu }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">收益：</div>
                    <div class="w-350 ml-20">{{ currentOrder.shouYi }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">费用：</div>
                    <div class="w-350 ml-20">{{ currentOrder.price }}</div>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">分配交付中心：</div>
                    <div class="w-350 ml-20">{{ currentOrder.jiaoFuZhongXinName }}</div>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {orderList,fenPeiDingDan,orderFenPeiLog,paiKelist} from '@/api/order.js'
import { getcusJiaofuzhongxin,ccusUserTeacherList} from '@/api/hhr.js'

export default {
    name: "Order",
    data() {
        return {
            dialogVisible2:false,
            dialogVisible1:false,
            dialogVisible: false,
            options1: [{
                value: '',
                label: '全部'
            }, {
                value: '1',
                label: '已排课'
            }, {
                value: '0',
                label: '未排课'
            }],
            options2: [{
                value: '',
                label: '全部'
            }, {
                value: '1',
                label: '已分配'
            }, {
                value: '0',
                label: '未分配'
            }],
            fenPeiStatus:'',
            input: '',
            tableData: [],
            page:1,
            total: 0,
            upUrl:this.$upLoadUrl,
            type:'',
            imgList:[],
            platform:'',
            type:1,
            total1:0,
            page1:1,
            currentOrder:{},
            jiaoFuZhongXinId:'',
            jiaoFuZhongXinName:'',
            teacherId:'',
            teacherName:'',
            jiaofuzhongxinList:[],
            laoshiList:[],
            list:[]
        }
    },
    mounted(){
        this.getUserList()
        this.getcusJiaofuzhongxin()
        this.ccusUserTeacherList()
    },
    methods: {
        change1(e){
            this.jiaoFuZhongXinName = this.jiaofuzhongxinList.find(item => item.id == e)?.name;
        },
        change2(e){
            this.teacherName = this.laoshiList.find(item => item.id == e)?.name;
            console.log(this.teacherName)
        },
        lookDetail(e){
            this.currentOrder = e
            this.dialogVisible2 = true
        },
        ccusUserTeacherList(){
            ccusUserTeacherList({
                pageNum: 1,
                pageSize: 100000,
            }).then(res=>{
                this.laoshiList = res.rows
            })
        },
        getcusJiaofuzhongxin(){
            getcusJiaofuzhongxin({
                pageNum: 1,
                pageSize: 100000,
            }).then(res=>{
                this.jiaofuzhongxinList = res.rows
            })
        },
        sizeChange1(e){
            this.page1 = e
            this.getList()
        },
        getList(){
            let apiFunction = this.type == 1 ? paiKelist : orderFenPeiLog
            apiFunction({
                orderNum:this.currentOrder.orderNum,
                pageNum:1,
                pageSize:1000000
            }).then(res=>{
                this.list = res.rows
            })
        },
        sizeChange(e) {
            this.page = e
            this.getUserList()
        },
        addUser() {
            for (var i in this.form) {
                if(i != 'type'){
                    this.form[i] = ''
                }
            }
            this.dialogVisible = true
            this.imgList = []
            this.type = 1
        },
        getUserList() {
            orderList({
                pageNum: this.page,
                pageSize: 15,
                paiKeStatus: this.platform,
                name: this.input,
                fenPeiStatus:this.fenPeiStatus
            }).then(res => {
                res.rows.forEach(item=>{
                    item.keShiSengYu = Number(item.keShiAll) - Number(item.keShiJiaoFU)
                })
                this.tableData = res.rows
                this.total = res.total
            })
        },
        submit(){
            if(this.jiaoFuZhongXinId == '') {
                this.$message.error('请选择交付中心');
                return 
            }
            if(this.teacherId == '') {
                this.$message.error('请选择交付老师');
                return 
            }
            fenPeiDingDan({
                id:this.currentOrder.id,
                jiaoFuZhongXinId:this.jiaoFuZhongXinId,
                jiaoFuZhongXinName:this.jiaoFuZhongXinName,
                teacherId:this.teacherId,
                teacherName:this.teacherName,
            }).then(res=>{
                    if (res.code == 0) {
                        this.dialogVisible = false
                        this.getUserList()
                        this.$message({
                            message: '分配成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.msg || '失败');
                    }
            })
        },


        chongzhi(){
            for (var i in this.form) {
                if(i != 'type'){
                    this.form[i] = ''
                }
            }
            this.getUserList()
        },
        fenpei(e){
            this.currentOrder = e
            this.dialogVisible = true
        },
        handleEdit(e, type) {
            this.currentOrder = e
            this.dialogVisible1 = true
            this.type = type
            this.getList()
        },

        handleDelete(e, type) {
            // this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(() => {
               
            //     removeCusBanner({ids: type.id}).then(res=>{
            //         this.$message({
            //             type: 'success',
            //             message: '删除成功!'
            //         });
            //         this.getUserList()
            //     })

            // }).catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '已取消删除'
            //     });
            // });
        },
        handleRemove(file, fileList) {
            this.form.pic = ''
        },
        handlePictureCardPreview(file) {
            this.form.pic = file.list[0].url
        }
    }
}
</script>